<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
    <!-- 在 Leaflet 中，map panes 隐式地将图层组合在一起 -->
    <!-- Map panes 使用 z-index CSS 属性来让某些图层始终显示在其他图层之上。默认的排序是：

    TileLayer 和 GridLayer
    Path, 如线、折线、圆或 GeoJSON 图层
    Marker 阴影
    Marker 图标
    Popup -->
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      var map = L.map('map');
      // 自定义pane（窗格）可以修改默认图层排序
      map.createPane('labels');
      // 设置窗格的zindex为650，这将使带有标签的 TileLayer 显示在标记的上面和弹窗窗口的下面
      map.getPane('labels').style.zIndex = 650;
      // 阻止标签捕捉到点击和触摸事件，当用户点击时仍然点击的是GeoJSON或者标记物而不是瓦片标签
      map.getPane('lables').style.pointerEvents = 'none';

      // 添加图层
      var positron = L.tileLayer(
        'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
        {
          attribution: '©OpenStreetMap, ©CartoDB',
        }
      ).addTo(map);

      var positronLabels = L.tileLayer(
        'https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png',
        {
          attribution: '©OpenStreetMap, ©CartoDB',
          pane: 'labels',
        }
      ).addTo(map);

      var geojson = L.geoJson(GeoJsonData, geoJsonOptions).addTo(map);

      // 添加交互
      geojson.eachLayer(function (layer) {
        layer.bindPopup(layer.feature.properties.name);
      });

      map.fitBounds(geojson.getBounds());
    </script>
  </body>
</html>
